<template>
  <cube-scroll ref="scroll" class="distpicker" :options="scrollOptions">
    <div class="area-info">
      <v-distpicker type="mobile" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
    </div>
    <div v-if="showSubmit">
      <div class="user-info">
        <div class="item"><label class="label">收件人</label><input placeholder="收件人" class="input" v-model="name" type="text"></div>
        <div class="item"><label>联系方式</label><input placeholder="联系方式" v-model="phone" type="text"></div>
        <div class="item"><label>详细地址</label><input placeholder="具体到街道和门牌号" v-model="detail" type="text"></div>
      </div>
      <div class="submit-wrapper">
        <div class="content" @click="save">
          <div class="content-right">
            <div class="text">保存</div>
          </div>
        </div>
      </div>
    </div>
  </cube-scroll>
</template>

<script>
  import axios from 'axios'
  import Qs from 'qs'
  import VDistpicker from 'v-distpicker'
  import { getCookie } from 'api'

  const ERR_OK = 0
  export default {
    data () {
      return {
        id: 0,
        name: '',
        phone: '',
        province: '',
        city: '',
        area: '',
        detail: '',
        showSubmit: false,
        scrollOptions: {
          click: true,
          directionLockThreshold: 0
        }
      }
    },
    created() {
      this.id = this.$route.params.addressId
    },
    components: { VDistpicker },
    methods: {
      onChangeProvince(a) {
        this.province = a.value
        this.showHeader = false
      },
      onChangeCity(a) {
        this.city = a.value
        this.showHeader = false
        },
      onChangeArea(a) {
        this.area = a.value
        this.showSubmit = true
      },
      save() {
        var data = Qs.stringify({'buyerOpenid': getCookie('openid'),
          'addressId': this.id,
          'phone': this.phone,
          'name': this.name,
          'province': this.province,
          'city': this.city,
          'area': this.area,
          'detail': this.detail,
          'status': '0'})
        axios.post('http://liujinliang.wang/sell/buyer/address/save', data, {
          'headers': {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}
        ).then((respones) => {
          respones = respones.data
          if (respones.errno === ERR_OK) {
            // 跳转到地址列表页
            this.$router.push({ path: `/address` })
          } else {
            alert(respones.msg)
          }
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .distpicker
    position: fixed
    z-index: 100
    bottom: 0
    left: 0
    width: 100%
    height: 100%
    background-color: #f5f5f5
    .user-info
      margin-top: 10px
      background-color: #fff
      margin-bottom: 20px
      .item
        padding: 0 14px
        display: flex
        border-bottom: 1px solid #eee
        label
          padding: 14px 0
          display:inline-block
          flex-basis: 93px
          color: #333
        input
          display: block
          flex: 1
          outline: 0
          color: #333
    .submit-wrapper
      display: flex
      left: 0
      bottom: 0
      z-index: 50
      width: 100%
      height: 48px
      background: $color-background-sss
      .content
        flex: 1
        padding: 15px
        text-align:center
        .content-right
          font-size: 18px
          color: $color-light-red
</style>
